<template>
  <view class="index-page">
    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 欢迎标题 -->
      <view class="welcome-section">
        <text class="welcome-title">欢迎使用</text>
        <view class="system-title">
          <text class="system-name">{{ userState.clinicInfo?.clinicName }}</text>
          <text class="system-type">诊疗系统</text>
        </view>
      </view>

      <!-- 功能卡片区域 -->
      <view class="function-cards">
        <!-- 预约挂号卡片 -->
        <view class="function-card" @tap="handleToAppointment">
          <view class="card-content">
            <text class="card-title">预约挂号</text>
            <text class="card-subtitle">选科室、选医生</text>
          </view>

          <view class="card-arrow">
            <Image :src="HomeArrow" class="card-icon" />
          </view>
        </view>

        <!-- 我的预约卡片 -->
        <view class="function-card" @tap="handleToMyAppointments">
          <view class="card-content">
            <text class="card-title">我的预约</text>
            <text class="card-subtitle">查看预约记录</text>
          </view>

          <view class="card-arrow">
            <Image :src="HomeArrow" class="card-icon" />
          </view>
        </view>
      </view>
    </view>

    <view class="home-logo">
      <Image
        :src="HomeLogo"
        class="home-logo-icon"
        @tap="handleLogin"
        v-if="globalState.isLogin === false"
      />
    </view>

    <BottomNav :activeIndex="0" />
  </view>
</template>

<script setup lang="ts">
import Taro, { useReady, useRouter } from "@tarojs/taro";
import HomeArrow from "../../assets/images/home_arrow.png";
import HomeLogo from "../../assets/images/home_login.png";
import BottomNav from "../../components/BottomNav.vue";
import { useGlobalStore } from "../../stores/globalStore";
import { useUserStore } from "../../stores/userStore";
import { setClinicId } from "../../utils/auth.util";

const userState = useUserStore();
const globalState = useGlobalStore();
const router = useRouter();

const handleLogin = () => {
  Taro.navigateTo({
    url: "/pages/login/login",
  });
};

// 处理跳转到预约页面
const handleToAppointment = () => {
  if (globalState.isLogin) {
    Taro.navigateTo({
      url: "/pages/appointmentDepartments/appointmentDepartments",
    });
  } else {
    handleLogin();
  }
};

// 处理跳转到我的预约页面
const handleToMyAppointments = () => {
  if (globalState.isLogin) {
    Taro.navigateTo({
      url: "/pages/myAppointments/myAppointments",
    });
  } else {
    handleLogin();
  }
};

useReady(() => {
  if (router.params.clinicId) {
    setClinicId(router.params.clinicId);
  }

  if (globalState.isLogin) {
    userState.getCmUserByIdApi();
  }

  userState.getClinicInfoApi();
});
</script>

<style lang="scss">
/* 页面主容器 */
.index-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f1f5f8;

  /* 欢迎区域样式 */
  .welcome-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    height: 184px;
    padding-left: 18px;
    padding-bottom: 16px;
    background: #f4faff;
    // filter: blur(89.19999694824219px);

    .welcome-title {
      width: 100%;
      font-weight: bold;
      font-size: 24px;
      color: #000000;
      letter-spacing: 1px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .system-title {
      width: 100%;

      .system-name {
        font-weight: bold;
        font-size: 24px;
        color: #000000;
        letter-spacing: 1px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .system-type {
        font-weight: bold;
        font-size: 24px;
        letter-spacing: 1px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        color: #16ada4;
      }
    }
  }

  /* 功能卡片区域 */
  .function-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding-top: 14px;
    padding-left: 18px;
    padding-right: 18px;

    /* 单个功能卡片 */
    .function-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 108px;
      padding-left: 31px;
      padding-right: 24px;
      background: #ffffff;
      box-shadow: 0px 2px 10px 0px rgba(178, 190, 189, 0.15);
      border-radius: 12px 12px 12px 12px;

      .card-content {
        display: flex;
        flex-direction: column;
        gap: 4px;

        .card-title {
          font-weight: 500;
          font-size: 20px;
          color: #222222;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .card-subtitle {
          font-weight: 400;
          font-size: 14px;
          color: #aaaaaa;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }

      .card-arrow {
        width: 24px;
        height: 24px;

        .card-icon {
          width: 24px;
          height: 24px;
        }
      }
    }
  }

  .home-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 87px;
    margin: 0px auto;
    margin-top: auto;
    margin-bottom: 3px;

    .home-logo-icon {
      width: 371px;
      height: 87px;
    }
  }
}
</style>
